<template>
  <div id="app">
    <MyTable :title="title" :datas="shoppingList">
    <template #head="res">
          {{res.title}}
    </template>
    <template #body="{items}">
        <td>{{ +items.id+100 }}</td>
        <td><img :src="items.imgURL" alt=""></td>
        <td>{{ items.names }}</td>
        <td>
          <MyTag v-model="items.tag"></MyTag>
        </td>
    </template>
   </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTalbe.vue'
import MyTag from './components/MyTag.vue';
export default {
  name: 'App',
  data() {
    return {
      shoppingList:JSON.parse(localStorage.getItem('shopList'))||[{
          id:1,
          imgURL:require('./assets/草莓.png'),
          names:'草莓',
          tag:"水果",
      },{
          id:2,
          imgURL:require('./assets/桃子.png'),
          names:'桃子',
          tag:"水果",
      },{
          id:3,
          imgURL:require('./assets/香蕉.png'),
          names:'香蕉',
          tag:"水果",
      },{
           id:4,
          imgURL:require('./assets/杨桃.png'),
          names:'杨桃',
          tag:"水果",
      }
    ],
    title:[{
      id:1, 
      title:"编号"
    },{
      id:2, 
      title:"图片"
    },{
      id:3, 
      title:"名称"
    },{
      id:4, 
      title:"标签"
    }]
    }
  },
  components: {
    MyTable,
    MyTag
  },
  watch:{
    shoppingList:{
      deep:true,
      handler(newValue){
        localStorage.setItem('shopList',JSON.stringify(newValue))
      }
    }
  }
}
</script>

<style scoped>
#app {
  font-family: '微软雅黑';
  width: 50vw;
  height: 40vh;
  margin: 0 auto;
  text-align: center;
  user-select: none;
}
input{
  position: absolute;
  width: 5em;
  padding: 5px;
  box-sizing: border-box;
}
</style>
